<template>
  <el-dialog title="导出"
             :visible.sync="visibles"
             append-to-body
             :close-on-click-modal="false"
             width="990px"
             :before-close="handleClose">
    <ExportTabs ref="expect"
                :types="types"
                @input="input" />
    <span slot="footer"
          class="dialog-footer">
      <div v-if="shouldShowAddOrEditSection">
        <el-button @click="handleGoBack">返回</el-button>
        <el-button @click="handleDefault">恢复默认</el-button>
        <el-button type="primary"
                   @click="handleConfirm">确认保存</el-button>
      </div>
      <div v-else>
        <el-button type="primary"
                   @click="handleConfirmExport">确认导出</el-button>
      </div>
    </span>
  </el-dialog>
</template>

<script>
import ExportTabs from './ExportTabs.vue'
import { customExports } from '@/api'
import { mapState } from "vuex";
import axios from 'axios';

export default {
  name: 'ExportExcel',
  components: { ExportTabs },
  model: {
    prop: "visible",
    event: "input"
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
  },
  data () {
    return {
      type: 'basis',
      currentTabData: {}
    }
  },
  computed: {
    ...mapState({
      menus: (state) => state.menu.menu
    }),
    visibles: {
      get: function () {
        return this.visible;
      },
      set: function (val) {
        this.$emit("update:visible", val);
      }
    },
    resourceId () {
      return this.menus?.resources.find(res => res.type === 4)?.resourceId;
    },
    types () {
      return this.type
    },
    shouldShowAddOrEditSection () {
      return this.types === 'add' || this.types === 'edit';
    }
  },
  watch: {
    visibles () {
      if (this.visibles) {
        this.type = 'basis'
      }
    }
  },
  methods: {
    handleClose () {
      this.$emit('input', false)
    },
    input (value, data) {
      this.currentTabData = data
      this.type = value
    },
    handleBack () {
      this.type = 'basis'
    },
    async handleConfirm () {
      const validateForm = this.$refs.expect.$refs.template
      try {
        let response = await validateForm.submitForm()
        if (this.type === 'edit') {
          this.updateExportMeta({ ...response, resourceId: this.resourceId })
        } else {
          this.createExport({ ...response, resourceId: this.resourceId })
        }
      } catch (error) {
        console.error(error);
      }
      // this.type = 'default'
    },
    async createExport (data) {
      let response = await axios.post('/user/export/meta', data)
      // let response = await customExports.loadExportMeta(data)
      if (response.code === 0) {
        this.$message.success(response.message)
        this.type = 'basis'
        this.$refs.expect.getExportTemplate()
      }
    },
    async updateExportMeta (data) {
      let response = await customExports.updateExportMeta(this.currentTabData.metaId, data)
      if (response.code === 0) {
        this.$message.success(response.message)
        this.type = 'basis'
        this.$refs.expect.getExportTemplate()
      }
    },
    handleGoBack () {
      this.type = 'basis'
      this.$refs.expect.getExportTemplate()
    },
    handleDefault () {
      if (this.type === 'edit') {
        this.$refs.expect.editTab()
      } else {
        this.$refs.expect.addTab()
      }
      this.$message.success('恢复默认成功')
    },
    handleConfirmExport () {
      if (Object.keys(this.currentTabData).length === 0) {
        this.currentTabData = this.$refs.expect._data.exportData[0]
      }
      this.$emit('handleConfirmExport', this.currentTabData)
    }
  }
}
</script>

<style lang="scss" scoped>
</style>